import { View, Text, Image, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { PaymentHandler, showEnvTip } from '../../utils/payment';
import './index.scss';

export default function ProductDetail() {
  const [loading, setLoading] = useState(false);

  // 处理选型
  const handleSpec = () => {
    Taro.showToast({
      title: '选型功能开发中',
      icon: 'none'
    });
  };

  // 处理支付
  const handlePayment = async () => {
    setLoading(true);
    
    // 显示环境提示
    showEnvTip();
    
    try {
      // 1. 生成订单数据
      const orderData = {
        customerName: '测试用户',
        customerPhone: '13800138000',
        paymentMethod: '微信支付',
        products: [
          {
            name: '寿衣',
            quantity: 1,
            price: 1680
          }
        ]
      };

      // 2. 调用支付处理器
      const response = await PaymentHandler.processPayment(orderData);
      
      if (response.success) {
        // 3. 支付成功提示
        Taro.showToast({
          title: response.message,
          icon: 'success'
        });

        // 4. 跳转到订单详情页
        setTimeout(() => {
          Taro.navigateTo({
            url: `/pages/order-detail/index?orderId=${response.data.id}`
          });
        }, 1500);
      } else {
        throw new Error(response.message);
      }
    } catch (error) {
      console.error('支付失败:', error);
      Taro.showToast({
        title: error instanceof Error ? error.message : '支付失败',
        icon: 'error'
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <View className='product-detail-container'>
      {/* 顶部大图 */}
      <View className='product-image-wrap'>
        <Image className='product-image' src='/assets/images/icons/burial-clothes.jpg' mode='aspectFill' />
      </View>
      {/* 商品名和标签 */}
      <View className='product-title-wrap'>
        <Text className='product-title'>寿衣</Text>
        <Text className='product-tag'>性价比</Text>
        <Text className='product-tag'>标准款</Text>
      </View>
      {/* 价格 */}
      <View className='product-price-wrap'>
        <Text className='product-price'>¥1680</Text>
      </View>
      {/* 条件筛选 */}
      <View className='product-section'>
        <Text className='section-label'>条件筛选</Text>
        <View className='section-content'>
          <Text className='product-tag'>性价比</Text>
          <Text className='product-tag'>标准款</Text>
        </View>
      </View>
      {/* 规格 */}
      <View className='product-section'>
        <Text className='section-label'>规格</Text>
        <View className='section-content'>
          <Text>共180个备选型号</Text>
          <Text className='section-link'>选型 &gt;</Text>
        </View>
      </View>
      {/* 发货 */}
      <View className='product-section'>
        <Text className='section-label'>发货</Text>
        <View className='section-content'>
          <Text>标记当日发货的商品16:00前付款可当日发货</Text>
        </View>
      </View>
      {/* 服务 */}
      <View className='product-section'>
        <Text className='section-label'>服务</Text>
        <View className='section-content'>
          <Text>正品保证</Text>
          <Text>全场包邮</Text>
          <Text>7天无理由退换</Text>
          <Text>13%增值税发票</Text>
        </View>
      </View>
      {/* tab切换 */}
      <View className='product-tabs'>
        <Text className='tab active'>产品详情</Text>
        <Text className='tab'>产品资料</Text>
      </View>
      {/* 底部操作栏 */}
      <View className='product-bottom-bar'>
        <View className='bottom-bar-left'>
          <Text className='bar-btn'>客服</Text>
          <Text className='bar-btn'>购物车</Text>
          <Text className='bar-btn'>询价单</Text>
        </View>
        <Button className='bar-btn-primary' onClick={handleSpec}>选型</Button>
        <Button 
          className='bar-btn-payment' 
          onClick={handlePayment}
          loading={loading}
        >
          {loading ? '支付中...' : '立即支付'}
        </Button>
      </View>
    </View>
  );
} 